<template>
	<view class="EditBox">
		<view :style="{'height': `${statusBarHeight}px`, 'background-color': '#060143'}"></view>
		<uni-nav-bar backgroundColor="#060143;" color="#FFF" :title="$t('language.ht')" @clickLeft="goBack" left-icon="left" :border="false" />
		
		<view class="logo">
			<image class="logo-ic" src="@/static/logo.png" alt="" />
			<view class="lang-wrap" @click="changeLanguage">
				<image src="../../static/100.png" mode=""></image>
				<text>{{$t('locale.lang')}}</text>
			</view>
		</view>
		<view class="formEdit"><textarea v-model="textArea" :placeholder="$t('language.placeholder')"></textarea></view>
		<view class="upfile">
			<view class="upfileImgBox">
				<view class="imgBox" v-for="(item, index) in imgBox" :key="index">
					<image :src="item" />
					<i class="removeImg" @click.self="remove(index)">删除</i>
				</view>
				<view class="upfileclick" @click="upfileImg()" v-if="imgBox.length != 9"></view>
			</view>
			<view class="submitEdit">
				<view @click="submitBtn">{{ $t('language.moments') }}</view>
			</view>
		</view>
	</view>
</template>
<script>
	import uniFilePicker from "@/uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue"
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';

	import {
		publish_topic,
		uploadImg
	} from "@/api/user";
	export default {
		name: 'Edit',
		components: {
			uniIcons
		},
		data() {
			return {
				baseUrl: HTTP_REQUEST_URL,
				statusBarHeight: 44,
				evenId: '',
				textArea: '',
				imgBox: [],
				serverIdGroup: [],
				imageString: [],
				safeTop: ''
			};
		},
		components: {
			uniFilePicker
		},
		onLoad(o) {
			const safe = uni.getSystemInfoSync()
			this.safeTop = safe.safeArea.top
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			let evenId = o.evenId;
			this.evenId = evenId;
		},
		created() {},
		methods: {
			submitBtn() {
				const t = this
				let arr = t.imageString;
				arr = arr.join('|');
				if (t.textArea == '') {
					let messagetips = t.$i18n.locale == 'zh' ? '请输入内容' :
						'Please enter content';
					uni.showToast({
						title: messagetips,
						icon: 'none'
					})
					return false;
				}
				uni.showLoading()
				publish_topic({
					event_id: t.evenId,
					content: t.textArea,
					image: arr
				}).then(
					response => {
						uni.hideLoading()
						if (response.code == 200) {
							let messagetips = t.$i18n.locale == 'zh' ? '发布成功' : 'success';
							uni.showToast({
								title: messagetips,
								icon: 'success',
								duration: 2000,
								success() {
									uni.navigateTo({
										url: '/pages/Moments/Momentslist?evenId=' + t.evenId
									})
								}
							})
						}
					},
					err => {
						console.log(err)
						uni.hideLoading()
					}
				);

			},
			goBack() {
				uni.navigateBack()
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					uni.setStorageSync('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					uni.setStorageSync('locale', 'zh')
				}
			},
			
			upfileImg() {
				var _that = this;
				let nowleagth = _that.imgBox.length;
				wx.chooseImage({
					count: 9 - nowleagth, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					defaultCameraMode: 'batch', //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。（注：用户进入拍照界面仍然可自由切换两种模式）
					isSaveToAlbum: 1, //整型值，0表示拍照时不保存到系统相册，1表示自动保存，默认值是1
					success: function(res) {
						var tempFilePaths = res.tempFilePaths; // 返回选定照片的本地ID列表，
						tempFilePaths.forEach(li => {
							_that.imgBox.push(li);
							wx.uploadFile({
								url: HTTP_REQUEST_URL + '/api/event/upload',
								filePath: li,
								fileType: 'image',
								name: 'file',
								formData: {
									'file': li
								},
								header: {
									// #ifdef MP
									"Content-Type": "multipart/form-data",
									// #endif
									'user-token': `Bearer ${uni.getStorageSync('token')}`
								},
								success(response) {
									if (response.statusCode == 200) {
										const data = JSON.parse(response.data)
										console.log(data.data, 'data')
										_that.imageString.push(HTTP_REQUEST_URL + data.data
											.url);
									} else {
										uni.showToast({
											title: response.msg,
											icon: 'none'
										})
									}
								},
								fail(err) {
									console.log(err, 555)
								}
							})
						});
					}
				});
			},
			remove(index) {
				var newimageString = this.imageString;
				var imgBoxList = this.imgBox;
				var servesList = this.serverIdGroup;
				imgBoxList.splice(index, 1); //local img arrey
				servesList.splice(index, 1); // serverid arrey
				newimageString.splice(index, 1); //http img arrey
			}
		}
	};
</script>
<style lang="scss">

	.logo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 30upx;
		background-color: #060143;

		.logo-ic {
			width: 78upx;
			height: 64upx;
		}

		.lang-wrap {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24upx;

			image {
				width: 30upx;
				height: 30upx;
				margin-right: 12upx;
			}
		}
	}

	page {
		background: #050033;
	}

	textarea::-webkit-input-placeholder {
		/* 使用webkit内核的浏览器 */
		color: #999999;
	}

	textarea:-moz-placeholder {
		/* Firefox版本4-18 */
		color: #999999;
	}

	textarea::-moz-placeholder {
		/* Firefox版本19+ */
		color: #999999;
	}

	textarea:-ms-input-placeholder {
		/* IE浏览器 */
		color: #999999;
	}

	.headerChangeLanguage {
		height: 100upx;
		background: #fff;
		padding: 0 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2upx 4upx #ccc;
		width: 100%;
		box-sizing: border-box;
	}

	.logo image {
		width: 178upx;
		height: 30upx;
	}


	.language {
		flex-shrink: 0;
	}

	.langeageZh {
		height: 30upx;
		width: 86upx;
		background: url($image-base-url + '/static/img/EN-17.png') no-repeat;
		background-size: 86upx 30upx;
	}

	.langeageEn {
		height: 30upx;
		width: 86upx;
		background: url($image-base-url + '/static/img/CH-17.png') no-repeat;
		background-size: 86upx 30upx;
	}

	.formEdit {
		padding: 30upx;
	}

	.formEdit textarea {
		width: 100%;
		height: 264upx;
		color: #fff;
		box-sizing: border-box;
		border: none;
		resize: none;
		outline: none;
		border-bottom: 1upx solid #1c1853;
	}

	.upfile {
		padding: 0 30upx;
		min-height: 530upx;
	}

	.upfileclick {
		width: 150upx;
		height: 150upx;
		background: url($image-base-url + '/static/img/edit.png') no-repeat left center;
		background-size: 100%;
	}

	.upfileImgBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
	}

	.imgBox {
		width: 150upx;
		height: 150upx;
		margin-right: 30upx;
		margin-bottom: 24upx;
		position: relative;
	}

	.imgBox:nth-child(4n) {
		margin-right: 0;
	}

	.imgBox image {
		width: 150upx;
		height: 150upx;
	}

	.imgBox .removeImg {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 48upx;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		font-size: 24upx;
		color: #fff;
		background: rgba(0, 0, 0, 0.6);
	}

	.submitEdit {
		padding-top: 130upx;
	}

	.submitEdit>view {
		width: 100%;
		height: 70upx;
		text-align: center;
		line-height: 70upx;
		color: #fff;
		background: #b88d5b;
		border-radius: 70upx;
	}
</style>